<template>
    <div ref="tabmenu" class="l-menu">
      <div @click="changeTabs(index)"  v-for="(item,index) in tabList" :class='["l-item", index == person.tab ? "l-active": ""]'>{{item.name}}</div>
      <!--<div class="l-item">个人资料</div>-->
      <!--<div class="l-item l-active">安全设置</div>-->
    </div>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    export default {
        name: "tab",
        data () {
          return {
            tabList: [
              {
                name: "账户管理"
              },
              {
                name: "个人资料"
              },
              {
                name: "安全设置"
              }
            ]
          }
        },
        created () {
          this.updatePersonTab()
        },
        computed: {
          ...mapState(['person'])
        },
        methods: {
          ...mapActions(['changePersonTab', 'updatePersonTab']),
          changeTabs (index) {
            let routerArr = ['account', 'userinfo', 'setter']

            this.$router.push({name: routerArr[index]})
            this.changePersonTab(index)
          }
        }
    }
</script>

<style lang="less" scoped>
    .l-menu {
      width: 700px;
      height: 80px;
      display: flex;
      margin: 26px auto 40px auto;
      background-color: #000;
      color: #fff;

      .l-item {
        width: 234px;
        line-height: 80px;
        text-align: center;
        font-size: 28px;

        &.l-active {
          background-color: #986d33;
        }
      }
    }
</style>
